<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button按钮</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h5>1.可作为按钮使用的标签或元素</h5>
    <!--如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，
    那么，务必为其设置 role="button" 属性。通俗的解释就是如果a标签不是用于本职功能(跳转链接),那么应该设置role属性.-->
    <a class="btn btn-default" href="#" role="button">link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input"/>
    <input class="btn btn-default" type="submit" value="Submit"/>

    <br>
    <br>
    <h5>2.预定义样式(.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link)</h5>
    <!-- Standard button -->
    <button type="button" class="btn btn-default">（默认样式）Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">（成功）Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">（警告）Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">（危险）Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">（链接）Link</button>

    <br>
    <br>
    <h5>3.尺寸(.btn-xs,.btn-sm,.btn-lg,.btn-block)</h5>
    <p>
        <button class="btn btn-primary btn-lg">大按钮）Large button</button>
        <button class="btn btn-default btn-lg">大按钮）Large button</button>
    </p>
    <p>
        <button class="btn btn-primary">（默认尺寸）Default button</button>
        <button class="btn btn-default">（默认尺寸）Default button</button>
    </p>
    <p>
        <button class="btn btn-primary btn-sm">（小按钮）Small button</button>
        <button class="btn btn-default btn-sm">（小按钮）Small button</button>
    </p>
    <p>
        <button class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
        <button class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
    </p>
    <!--通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。-->
    <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

    <br>
    <br>
    <h5>4.激活状态(.active)</h5>
    <button type="button" class="btn btn-primary btn-lg active">Primary Button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>
    <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

    <br>
    <br>
    <h5>5.禁用状态(.active)</h5>
    <!--<button> 元素添加 disabled 属性，使其表现出禁用状态。-->
    <button class="btn btn-primary btn-lg" disabled="disabled">Primary Button</button>
    <button class="btn btn-default btn-lg" disabled="disabled">Default Button</button>
    <!--为<a> 元素创建的按钮添加 .disabled 类-->
    <a href="#" class="btn btn-primary btn-lg disabled">Primary Link</a>
    <a href="#" class="btn btn-default btn-lg disabled">Default Link</a>
</div>
</body>
</html>